<template>
  <section class="bgff p20" style="height:100%;box-sizing:border-box;">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="选择月份">
        <el-date-picker
          v-model="value1"
          type="month"
					placeholder="选择月份"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="项目地区">
          <el-select v-model="formInline.region"  filterable placeholder="项目地区">
              <el-option label="雨城区" value="shanghai"></el-option>
              <el-option label="名山区" value="beijing"></el-option>
              <el-option label="天全县" value="beijing"></el-option>
              <el-option label="荥经县" value="beijing"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="项目名称">
          <el-select v-model="formInline.projectName" filterable placeholder="项目名称">
              <el-option label="项目1" value="1"></el-option>
              <el-option label="项目2" value="2"></el-option>
              <el-option label="项目3" value="3"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
		<div>
      <div class="tx-c myck">
        <el-checkbox-group v-model="legendData">
          <el-checkbox label="水位曲线" name="type"></el-checkbox>
          <el-checkbox label="闸门开度" name="type"></el-checkbox>
            <el-checkbox label="流量曲线" name="type"></el-checkbox>
            <el-checkbox label="自定义曲线" name="type"></el-checkbox>
          <el-checkbox label="自定义曲线2" name="type"></el-checkbox>
        </el-checkbox-group>
      </div>
			<div id="myChart77" style="width:100%;height:700px;"></div>
		</div>
  </section>
</template>

<script>
import {getDay} from '@/utils/day7.js'
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      legendData:['水位曲线','闸门开度','流量曲线','自定义曲线','自定义曲线2'],
      legendDrawData:['水位曲线','闸门开度','流量曲线','自定义曲线','自定义曲线2'],
      value1: ""
    };
  },
  watch:{
    legendData(val){
      this.drawBar()
    }
  },
	mounted() {
		this.drawBar()
   },
  methods: {
    onSubmit() {
      console.log(this.legendData)
      this.drawBar()
		},
		 drawBar(){
       let myChart = this.$echarts.init(document.getElementById("myChart77"));
       let option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: this.legendDrawData,
                bottom: 0
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [getDay(-7),getDay(-6),getDay(-5),getDay(-4),getDay(-3),getDay(-2),getDay(-1)]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'水位曲线',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210],
                    lineStyle:{
                      normal:{
                        color:'#41b508',
                        width:2
                      }
                    }
                },
                {
                    name:'闸门开度',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310],
                    lineStyle:{
                      normal:{
                        color:'#1185aa',
                        width:2
                      }
                    }
                },
                {
                    name:'自定义曲线',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410],
                     lineStyle:{
                      normal:{
                        color:'#41b508',
                        width:2
                      }
                    }
                },
                {
                    name:'流量曲线',
                    type:'line',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320],
                    lineStyle:{
                      normal:{
                        color:'#409EFF',
                        width:2
                      }
                    }
                },
                {
                    name:'自定义曲线2',
                    type:'line',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320],
                    lineStyle:{
                      normal:{
                        color:'#c208e6',
                        width:2
                      }
                    }
                }
            ]
        }
        let obj ={}
        myChart.setOption(option)
        var selectArr = myChart.getOption().legend[0].data;//legend所有值
        var checkboxs=document.getElementsByName('checkboxchart'); 
          this.legendDrawData.forEach((e)=>{
            let isin = false
            this.legendData.forEach((d)=>{
              if(e===d){
                isin = true
              }
            })
            if(isin){
              obj[e] = true
            }else{
              obj[e] = false
            }
          })
          option.legend.selected = obj;
          myChart.setOption(option);
    }
  }
};
</script>

<style lang="less">
.myck{
  .el-checkbox.is-checked:nth-of-type(1){
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #41b508;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner{
      background-color: #41b508;
      border-color: #41b508;
    }
  }
  .el-checkbox.is-checked:nth-of-type(2){
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #1185aa;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner{
      background-color: #1185aa;
      border-color: #1185aa;
    }
  }
  .el-checkbox.is-checked:nth-of-type(3){
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #a11;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner{
      background-color: #a11;
      border-color: #a11;
    }
  }
  .el-checkbox.is-checked:nth-of-type(5){
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #c208e6;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner{
      background-color: #c208e6;
      border-color: #c208e6;
    }
  }
}
</style>
